react性能优化篇之umi.js打包去掉console和开启gzip压缩

2024-01-18 01:56| 来源: 网络整理| 查看: 265

本人已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

本次打包针对react --version 17.0.2 和 umi --verison 3.5

版本上下浮动一下没问题，也可以适用

参考如下👇

一、去除console

第一步：安装 babel-plugin-transform-remove-console 插件

npm install babel-plugin-transform-remove-console

第二步：在config.ts或.umirc.ts中进行配置

图例👇

代码👇

//在生产环境中取消console extraBabelPlugins: [isProd ? 'transform-remove-console' : ''] //或者 //在所有环境中取消console extraBabelPlugins: [transform-remove-console]

完成！！！

二、开启gzip压缩

gzip压缩是前端性能优化的一种手段，减少build之后包的体积，加快首屏渲染速度。

第一步：安装 compression-webpack-plugin 插件

npm install compression-webpack-plugin

第二步：在config.ts或.umirc.ts中进行配置

图例👇

代码👇

chainWebpack: function (config, { webpack }) { config.merge({ optimization: { splitChunks: { chunks: 'all', minSize: 1000, minChunks: 2, automaticNameDelimiter: '.', cacheGroups: { vendor: { name: 'vendors', test({ resource }) { return /[\\/]node_modules[\\/]/.test(resource) }, priority: 10, }, }, }, }, }) //在生产环境开启gzip压缩 if (isProd) { // Gzip压缩 config.plugin('compression-webpack-plugin').use(CompressionPlugin, [ { test: /\.(js|css|html)$/i, // 匹配 threshold: 10240, // 超过10k的文件压缩 deleteOriginalAssets: false, // 不删除源文件 }, ]) } }

配置完成后使用npm run build 打包

查看dist文件夹中出现了.gz结尾的压缩包，就是压缩成功了

图例👇

但是到这里还没完，还需要，到这里只是前端完成了gzip压缩。如果在项目中需要gzip压缩之后的压缩文件。还需要后端在nginx中配置 gzip_static on

//nginx 配置 gzip_static on //检测是否存在gzip文件，有，则返回给客户端

最后，运行项目，找一个css或者js或者html后缀的文件，查看响应头中的 Content-Encoding 字段。显示为gzip则表示gzip在项目中使用成功。

图例👇

到此。gzip压缩开启完成！！

【本文地址】

公司简介

联系我们